import React, { useState, useEffect } from 'react';
import {
  Button,
  Layout,
  Card,
  Pagination,
  Empty,
  Drawer,
  Form,
  Input,
  message,
  Popconfirm,
  Switch,
  Upload
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import CommentSearch from './components/CommentSearch';
import { PlusOutlined, InboxOutlined } from '@ant-design/icons';
import './index.less';
import { connect } from 'umi'
import {
  EditOutlined,
  SettingOutlined,
  CloudUploadOutlined,
  DeleteOutlined,
  CloseOutlined,
} from '@ant-design/icons';
import Footers from '@/components/Footer';
import type { PaginationProps } from 'antd';
import { delknowledge } from '@/api/knowledge'
function IndexPage(props: any) {
  const { Header, Footer, Content } = Layout;
  //获取知识小册所有数据
  const { setknowledge, total, dispatch } = props;
  const [pageInfo, setPage] = useState({ page: 1, pageSize: 12 })
// 获取所有数据
  useEffect(() => {
    dispatch({
      type: 'knowledge/INIT',
      pageInfo,
    })
  }, []);
  const { Meta } = Card;
  // 总数据
  const showTotal: PaginationProps['showTotal'] = () => `共 ${total} 条`;
  //抽屉
  const [open, setOpen] = useState(false);
  const showDrawer = (item: any) => {
    setOpen(true);
    // console.log(item);
    form.setFieldsValue(item);
  };
// 取消按钮
  const onClose = () => {
    setOpen(false);
  };
  // 删除确认
  const confirm = (e: any) => {
    delknowledge(e.id).then((res: any) => {
      if (res.statusCode === 200) {
        dispatch({
          type: 'knowledge/INIT',
          pageInfo,
        })
        message.success('删除成功');
      }
    })
  };
  // 删除取消
  const cancel = (e: any) => {
    // message.error('Click on No');
  };
  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };
  const { TextArea } = Input;
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    // console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };
  return (
    <div>
      <Layout>
        <PageHeaderWrapper />
        <Header
          style={{
            background: '#f0f2f5',
            height: '220px',
            padding: '20px 20px 0px 20px',
          }}
        >
          <Card bodyStyle={{ padding: '0px' }}>
            <CommentSearch></CommentSearch>
          </Card>
        </Header>
        <Content style={{ padding: '0px 20px 20px 20px' }}>
          <Card
            extra={
              <p>
                <Button type="primary">
                  <PlusOutlined />
                  新建
                </Button>
              </p>
            }
          >
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
              {setknowledge && setknowledge.length > 0 ? (
                setknowledge.map((item: any, index: any) => {
                  return (
                    <Card
                      key={index}
                      style={{ width: '275px', height: '265px', margin: '9px' }}
                      cover={<img alt="图片损坏" src={item['cover']} />}
                      actions={[
                        <EditOutlined />,
                        <CloudUploadOutlined />,
                        <SettingOutlined onClick={() => showDrawer(item)} />,
                        <Popconfirm
                          title="确认删除？"
                          onConfirm={() => confirm(item)}
                          onCancel={cancel}
                          okText="确认"
                          cancelText="取消"
                        >
                          <DeleteOutlined />
                        </Popconfirm>,
                      ]}
                    >
                      <Meta
                        title={item['title']}
                        description={item['summary']}
                      />
                    </Card>
                  );
                })
              ) : (
                <Empty />
              )}
              {/* 抽屉 */}
              <Drawer
                title={`更新知识库`}
                placement="right"
                onClose={onClose}
                width={600}
                open={open}
                closable={false}
                extra={
                  <span onClick={onClose} style={{ cursor: 'pointer' }}>
                    <CloseOutlined />
                  </span>
                }
                footer={
                  <div style={{ float: 'right' }}>
                    <Button style={{ marginRight: '10px' }}>取消</Button>
                    <Button type="primary">确认</Button>
                  </div>
                }
              >
                {/* 表单 */}
                <Form form={form} name="control-hooks" onFinish={onFinish}>
                  <Form.Item label="名称" name="title">
                    <Input />
                  </Form.Item>
                  <Form.Item name="summary" label="描述">
                    <TextArea
                      placeholder="Controlled autosize"
                      autoSize={{ minRows: 3, maxRows: 5 }}
                    />
                  </Form.Item>
                  <Form.Item name="switch" label="评论" valuePropName="checked">
                    <Switch />
                  </Form.Item>
                  <Form.Item label="封面">
                    <Form.Item
                      name="dragger"
                      valuePropName="fileList"
                      getValueFromEvent={normFile}
                      noStyle
                    >
                      <Upload.Dragger name="files" action="/upload.do">
                        <p className="ant-upload-drag-icon">
                          <InboxOutlined />
                        </p>
                        <p className="ant-upload-text">
                          点击选择文件或将文件拖拽到此处
                        </p>
                        <p className="ant-upload-hint">
                          文件将上传到 OSS, 如未配置请先配置
                        </p>
                      </Upload.Dragger>
                    </Form.Item>
                  </Form.Item>

                  <Form.Item>
                    <Input />
                  </Form.Item>
                  <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                      Submit
                    </Button>
                    <Button htmlType="button" onClick={onReset}>
                      Reset
                    </Button>
                  </Form.Item>
                </Form>
              </Drawer>
            </div>
            {/* 分页 */}
            <Pagination
              defaultCurrent={4}
              total={total}
              style={{ float: 'right' }}
              showTotal={showTotal}
            />
          </Card>
        </Content>
        <Footer>
          <Footers></Footers>
        </Footer>
      </Layout>
    </div>
  );
}
// connect接收两个参数
// 1. 函数 mapStateToProps
const mapStateToProps = (state: any) => {
  const { knowledge } = state
  return knowledge
}
export default connect(mapStateToProps)(IndexPage)
